<template>
	<view class="login-content">
		<block v-if="!has_account">
			<view class="login-title">
				<image src="../../static/logo.png"></image>
				<text>手机号登录</text>
			</view>
			<view class="login-desc">
				首次登录手机号将在验证后生成新账号
			</view>
			<view class="login-input">
				<up-input
				    placeholder="请输入手机号"
				    border="bottom"
					v-model="phone"
				    clearable
				  ></up-input>
			</view>
			<view class="login-btn" :class="{'user-nocheck':!aloneChecked.value || !aloneChecked.value .length}" @click="login('code')">
				发送短信验证码
			</view>
		</block>
		<block v-if="has_account">
			<view class="login-title">
				<image src="../../static/logo.png"></image>
				<text>欢迎登录nixx平台</text>
			</view>
			<view class="login-input">
				<up-input
				    placeholder="用户名"
				    border="bottom"
				    clearable
					v-model="username"
				  ></up-input>
			</view>
			<view class="login-input login-pswd">
				<up-input
				    placeholder="密码"
				    border="bottom"
				    clearable
					password
					v-model="password"
				  ></up-input>
			</view>
			<view class="login-btn" :class="{'user-nocheck':!aloneChecked.value || !aloneChecked.value .length}" @click="login">
				登录
			</view>
		</block>
		
		<view class="login-before-know">
			 <up-checkbox-group
			            v-model="aloneChecked.value"
			            placement="row"
			        >
			<up-checkbox
			        name="agree"
					label
			    />
				</up-checkbox-group>
				<view>
					我已阅读并同意<text class="login-rules">服务条款</text>和<text class="login-rules">隐私政策</text>
				</view>
				
			
		</view>
		<!-- <view class="login-warning" @click="changeLoginType">
			<block v-if="has_account">
				还没有账号，<text>去注册</text>
			</block>
			<block v-else>
				已有账号，<text>去登录</text>
			</block>
		</view> -->
	</view>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {loginAccount} from '../../api/login.js'
import {encryptData} from '../../utils/ase.js'
 import store from '@/store/index.js'
const has_account = ref(true)
const aloneChecked = reactive([])
const username = ref('')
const password = ref('')
const phone = ref('')
const changeLoginType = () => {
	has_account.value = !has_account.value
	aloneChecked.value = []
	username.value = ''
	password.value = ''
    phone.value = ''
}
const login = async (tag) => {
	if (!aloneChecked.value || !aloneChecked.value .length)  {
		uni.showToast({
			title: '请勾选用户协议',
			icon: 'none',
			duration: 2000
		})
		return
	}
	if (tag === 'code') {
		// 校验手机号
		let reg = /1[2-9]{10}/
		if (!reg.test(phone.value.trim())) {
			uni.showToast({
				title: '请输入正确的电话号码',
				icon: 'none',
				duration: 2000
			})
			return 
		}
		uni.navigateTo({
			url: `/pages/login/code?phone=${phone.value}`
		})
		return
	}
	let u = username.value.trim()
	let p = password.value.trim()
	if (!u || !p) {
		uni.showToast({
			title: '请输入用户信息',
			icon: 'error',
			duration: 2000
		})
	}
	let res = await loginAccount({
		username: encryptData(u),
		password: encryptData(p)
	})
	if (res.data.accessToken) {
		store.commit('setToken',res.data.accessToken)
		uni.navigateBack()
	}
}
</script>

<style lang="scss">
.login-content{
	margin: 50rpx;
	padding: 50rpx;
	background-color: #f5f5f5;
	.login-title{
		font-size: 35rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		>image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
	}
	.login-desc{
		margin-top: 50rpx;
		color:#9f9f9f;
		font-size: 25rpx;
	}
	.login-input{
		margin-top: 80rpx;
	}
	.login-pswd{
		margin-top: 0;
	}
	.login-warning{
		margin-top: 30rpx;
		text-align: right;
		font-size: 25rpx;
		>text{
			color:#1078e7;
		}
	}
	.login-btn{
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		text-align: center;
		color: #fff;
		font-weight: 700;
		background-color: #3079fe;
		margin-top: 80rpx;
	}
	.login-before-know{
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		font-size: 25rpx;
		>view{
			margin-left: 10rpx;
		}
		.login-rules{
			color:#1078e7;
		}
	}
    .user-nocheck{
		background-color: #c8c7c7;
	}
}
</style>